.el-button {
  border: 1px solid var(--color-border-second);
  border-color: var(--color-border-second);
  color: var(--color-font-first);
  font-weight: 700;
  &:focus,
  &:hover {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
  }
  .is-plain {
    &:focus,
    &:hover {
      border-color: var(--color-primary);
    }
    &:active {
      border-color: var(--color-primary);
    }
  }
  &.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  &.is-disabled {
    border-color: var(--color-border-second);
  }
}

.el-button--default {
  &:focus,
  &:hover {
    background-color: transparent;
    border-color: var(--color-primary-hover);
  }
}

.el-button--medium {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 4px;
}

.el-button--small {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 4px;
}



@each $type in (primary, success, warning, danger, info) {
  .el-button--#{$type} {
    color: #fff;
    background-color: var(--color-#{$type});
    border-color: var(--color-#{$type});

    &:focus,
    &:hover {
      background: var(--color-#{$type}-hover);
      border-color: var(--color-#{$type}-hover);
      color: #fff;
    }
    &:active {
      background: var(--color-#{$type}-press);
      border-color: var(--color-#{$type}-press);
    }

    &.is-disabled {
      background-color: var(--color-#{$type}-disabled);
      border-color: var(--color-#{$type}-disabled);
      &:focus,
      &:active,
      &:hover {
        background-color: var(--color-#{$type}-disabled);
        border-color: var(--color-#{$type}-disabled);
      }
    }
    &.is-plain {
      background: var(--color-#{$type}-plain);
      border-color: var(--color-#{$type}-plain-border);
      &:focus,
      &:hover {
        background: var(--color-#{$type});
        border-color: var(--color-#{$type});
      }
      &:active {
        background: var(--color-#{$type}-press);
        border-color: var(--color-#{$type}-press);
      }
      &.is-disabled {
        background-color: var(--color-#{$type}-disabled);
        border-color: var(--color-#{$type}-disabled);
        &:hover,
        &:active,
        &:focus {
          background-color: var(--color-#{$type}-disabled);
          border-color: var(--color-#{$type}-disabled);
        }
      }
    }
  }
}

.el-button--text {
  border-color: transparent !important;
  background-color: transparent !important;
  color: var(--color-primary);
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
  &.is-disabled {
    color: var(--color-primary-disabled);
    &:focus,
    &:active,
    &:hover {
      color: var(--color-primary-disabled);
      border-color: transparent !important;
      background-color: transparent !important;
    }
  }
}

.delete-button {
  color: var(--color-danger)!important;
  &:focus,
  &:hover {
    color: var(--color-danger-hover)!important;
  }
  &.is-disabled {
    color: var(--color-danger-disabled)!important;
    &:focus,
    &:active,
    &:hover {
      color: var(--color-danger-disabled)!important;
    }
  }
}
